<template>
  <div>
    <el-row style="margin-bottom: 15px" type="flex" align="middle">
		<el-col :span="10">
			<b style="font-size: 20px">已添加违章行为</b>
		</el-col>
<!--		<el-col :span="3">-->
<!--			<div style="float: right">-->
<!--				<el-button size="medium" @click="addChooseCondition = true;">信息筛选条件</el-button>-->
<!--			</div>-->
<!--		</el-col>-->
      <!-- 修改布局 -->
      <el-col :span="6" :offset="14">
        <el-row type="flex" align="middle">

<!--          <el-col :span="20">-->
<!--            <el-input-->
<!--              placeholder="请输入员工姓名"-->
<!--              prefix-icon="el-icon-search"-->
<!--              size="medium" @keyup.enter.native="search(searchName)"-->
<!--              v-model="searchName">-->
<!--            </el-input>-->
<!--          </el-col>-->

<!--          <el-col :span="15">-->
<!--            <div style="float: right">-->
<!--              <el-button type="success" icon="el-icon-plus" size="medium" @click="addDialogVisible = true;" round>-->
<!--              添加-->
<!--              </el-button>-->
<!--&lt;!&ndash;              <el-popconfirm title="确定删除吗？" @confirm="deleteRows()">&ndash;&gt;-->
<!--&lt;!&ndash;                <el-button slot="reference" type="danger" icon="el-icon-delete" size="medium" round&ndash;&gt;-->
<!--&lt;!&ndash;                           :disabled="this.selectionList.length===0">&ndash;&gt;-->
<!--&lt;!&ndash;                  批量删除&ndash;&gt;-->
<!--&lt;!&ndash;                </el-button>&ndash;&gt;-->
<!--&lt;!&ndash;              </el-popconfirm>&ndash;&gt;-->
<!--            </div>-->
<!--          </el-col>-->
        </el-row>
      </el-col>
    </el-row>

    <el-table :data="workers" border tooltip-effect="dark" stripe max-height="638"
              @selection-change="handleSelectionChange">

      <el-table-column align="center" prop="name" label=" " width="1230">
      </el-table-column>

<!--			<el-table-column align="center" prop="id" label="工号" width="120">-->
<!--			</el-table-column>-->
<!--      <el-table-column align="center" label="岗位">-->
<!--        <template slot-scope="scope">-->
<!--          <el-tag style="margin: 5px 5px 5px 5px;"-->
<!--                  v-for="job in scope.row.jobs" :disable-transitions="true"-->
<!--                  :key="job" type="warning"-->
<!--                  size="small">-->
<!--            {{ job }}-->
<!--          </el-tag>-->
<!--        </template>-->
<!--      </el-table-column>-->
<!--			<el-table-column align="center" prop="task" label="班组">-->
<!--			  <template slot-scope="scope">-->
<!--			    <el-tag style="margin: 5px 5px 5px 5px;"-->
<!--			            v-for="task in scope.row.tasks" :disable-transitions="true"-->
<!--			            :key="task" type="warning"-->
<!--			            size="small">-->
<!--			      {{ task }}-->
<!--			    </el-tag>-->
<!--			  </template>-->
<!--			</el-table-column>-->

<!--      <el-table-column align="center" prop="money" label="目前金额/月"  width="120">-->
<!--      </el-table-column>-->

<!--	  <el-table-column align="center" prop="score" label="当前季度绩效"  width="120">-->
<!--	  </el-table-column>-->

      <el-table-column align="center" label="操作" width="300">
        <template slot-scope="scope">
          <el-button plain size="mini"
                     type="primary" icon="el-icon-edit"
                     @click="clickEditButton(scope.$index)">修改
          </el-button>
<!--          <el-button plain size="mini"-->
<!--                     type="primary" icon="el-icon-document-checked"-->
<!--                     @click="totoalTaskDialogVisible = true">累计-->
<!--          </el-button>-->
          <el-popconfirm title="确定删除吗？" @confirm="deleteRow(scope.$index)">
            <el-button slot="reference" plain size="mini" style="margin-left: 10px"
                       type="danger" icon="el-icon-delete">-
            </el-button>
          </el-popconfirm>
        </template>
      </el-table-column>

    </el-table>
    <el-col :span="21">
      <div style="float: right" width="1200">
        <el-button type="success" icon="el-icon-plus" size="mini" @click="addDialogVisible = true;" >
          添加
        </el-button>
        <!--              <el-popconfirm title="确定删除吗？" @confirm="deleteRows()">-->
        <!--                <el-button slot="reference" type="danger" icon="el-icon-delete" size="medium" round-->
        <!--                           :disabled="this.selectionList.length===0">-->
        <!--                  批量删除-->
        <!--                </el-button>-->
        <!--              </el-popconfirm>-->
      </div>
    </el-col>
    <div style="width: 100%;position:absolute;left: 0;bottom: 10px">
      <div style="display: flex;justify-content:center;">
        <el-pagination
          :page-size="10"
          layout="prev, pager, next"
          :total="20">
        </el-pagination>
      </div>
    </div>

    <el-dialog title="新建违章行为" :visible.sync="addDialogVisible" width="30%">
      <el-form :model="newWorker" :rules="rules" ref="addWorkerForm">
        <el-form-item label="名称" prop="name">
          <el-input v-model="newWorker.name"></el-input>
        </el-form-item>
<!--		<el-form-item label="工号" prop="id">-->
<!--		  <el-input v-model="newWorker.name"></el-input>-->
<!--		</el-form-item>-->
<!--        <el-form-item label="岗位">-->
<!--          <el-select v-model="newWorker.jobs" multiple filterable placeholder="请选择岗位">-->
<!--            <el-option-->
<!--              v-for="item in allJobs"-->
<!--              :key="item"-->
<!--              :label="item"-->
<!--              :value="item">-->
<!--            </el-option>-->
<!--          </el-select>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="班组">-->
<!--          <el-select v-model="newWorker.tasks" multiple filterable placeholder="请选择班组">-->
<!--            <el-option-->
<!--              v-for="item in allTasks"-->
<!--              :key="item"-->
<!--              :label="item"-->
<!--              :value="item">-->
<!--            </el-option>-->
<!--          </el-select>-->
<!--        </el-form-item>-->
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="addWorker('addWorkerForm')">确定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="累计完成任务情况" :visible.sync="totoalTaskDialogVisible" width="30%">
      <el-row type="flex" align="middle" :gutter="20">
        <el-col :span="12">
          <el-card shadow="hover" style="text-align: center;" body-style="overflow: auto;height: 300px">
            <div slot="header">
              <el-alert title="已完成任务" type="success" show-icon :closable="false" center>
              </el-alert>
            </div>
            <el-tag v-for="number in 25" :key="number" type="warning"
                    style="margin: 5px 5px 5px 5px;" >
              任务{{ number }}
            </el-tag>
          </el-card>
        </el-col>'
        <el-col :span="12">
          <el-card shadow="hover" style="text-align: center;" body-style="overflow: auto;height: 300px">
            <div slot="header">
              <el-alert title="已逾期任务" type="error" show-icon :closable="false" center>
              </el-alert>
            </div>
            <el-tag v-for="number in 5" :key="number" type="warning"
                    style="margin: 5px 5px 5px 5px;" >
              任务{{ number }}
            </el-tag>
          </el-card>
        </el-col>
      </el-row>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="totoalTaskDialogVisible = false">确定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="新建违章行为" :visible.sync="editDialogVisible" width="30%">
      <el-form :model="tempWorker" :rules="rules" ref="editWorkerForm">
        <el-form-item label="名称" prop="name">
          <el-input v-model="tempWorker.name"></el-input>
        </el-form-item>
<!--		<el-form-item label="工号" prop="id">-->
<!--		  <el-input v-model="tempWorker.id"></el-input>-->
<!--		</el-form-item>-->
<!--        <el-form-item label="岗位">-->
<!--          <el-select v-model="tempWorker.jobs" multiple filterable placeholder="请选择岗位">-->
<!--            <el-option-->
<!--              v-for="item in allJobs"-->
<!--              :key="item"-->
<!--              :label="item"-->
<!--              :value="item">-->
<!--            </el-option>-->
<!--          </el-select>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="班组">-->
<!--          <el-select v-model="tempWorker.tasks" multiple filterable placeholder="请选择班组">-->
<!--            <el-option-->
<!--              v-for="item in allTasks"-->
<!--              :key="item"-->
<!--              :label="item"-->
<!--              :value="item">-->
<!--            </el-option>-->
<!--          </el-select>-->
<!--        </el-form-item>-->
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="editWorker('editWorkerForm')">确定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
export default {
  name: "index",
  methods: {
    deleteRow(index) {
      this.workers.splice(index, 1);
      this.$message({
        showClose: true,
        message: '删除成功！',
        type: 'success'
      });
    },
    deleteRows(index) {
      this.workers = this.workers.filter(
        worker => {
          return !this.selectionList.includes(worker);
        }
      );
      this.$message({
        showClose: true,
        message: '删除成功！',
        type: 'success'
      });
    },
    clickEditButton(index) {
      this.editDialogVisible = true;
      this.currentIndex = index;
      //中间变量，以便点击提交的时候才会更新当前的数据
      this.tempWorker = JSON.parse(JSON.stringify(this.workers[index]));
    },
    search(keyword){
      // this.workers = this.workers.filter(
      //   worker => {
      //     return worker.name.includes(keyword);
      //   }
      // );
    },
    addWorker(formName){
      this.$refs[formName].validate(
        (valid) => {
          if (valid) {
            this.$message({
              showClose: true,
              message: '添加成功！',
              type: 'success'
            });
            //数组直接复制不会触发Vue更新视图，必须用以下方法
            this.workers.push(this.newWorker)
            this.addDialogVisible = false
            this.newWorker = {
              name: '',
			  id:'',
              tasks: [],
              jobs: []
            }
          } else {
            return false;
          }
        });
    },
    editWorker(formName) {
      this.$refs[formName].validate(
        (valid) => {
          if (valid) {
            this.$message({
              showClose: true,
              message: '修改成功！',
              type: 'success'
            });
            this.editDialogVisible = false;
            //数组直接复制不会触发Vue更新视图，必须用以下方法
            this.workers.splice(this.currentIndex, 1, this.tempWorker)
          } else {
            return false;
          }
        });
    },
    //批量选择时触发
    handleSelectionChange(selection) {
      this.selectionList = []
      selection.forEach((item, index) => {
        this.selectionList.push(item)
      });
    },
  },
  data() {
    return {
      selectionList: [],
      tempWorker: {
        name: '',
        id: '',
        tasks: [],
        jobs: []
      },
      editDialogVisible: false,
      addDialogVisible: false,
	    addChooseCondition: false,
      totoalTaskDialogVisible: false,
      currentIndex: 0,
      allJobs: ['岗位1', '岗位2', '岗位3', '岗位4', '岗位5', '岗位6'],
      allTasks: ['任务1', '任务2', '任务3', '任务4', '任务5', '任务6', '任务7', '任务8', '任务9', '任务10', '任务11', '任务12', '任务13', '任务14', '任务15', '任务16'],
      searchName: '',
      newWorker: {
        name: '',
        tasks: [],
        jobs: []
      },
      rules: {
        name: [
          {required: true, message: '请输入名称', trigger: 'blur'},
        ]
      },
      workers: [
        {
          name: '违章违章违章违章违章违章违章违章违章违章违章违章违章违章违章违章违章违章违章违章违章违章违章违章违章违章违章违章违章违章违章',

        },
        {
          name: '违章2',

        }
      ],
    }
  },
}
</script>

<style scoped>
.el-card >>> .el-card__header{
  padding: 0;
}
</style>
